---
{
	"title": "Charts and graphs - Simple and easy",
	"language": "en",
	"category": "Plugins",
	"description": "Dynamically generates charts and graphs from table data.",
	"tag": "charts",
	"parentdir": "charts",
	"altLangPrefix": "charts",
	"dateModified": "2015-03-10"
}
---

<ul>
	<li><a href="charts-en.html">Charts and graphs - Simple and easy (current)</a></li>
	<li><a href="labelsandreferencevalue-en.html">Labels and reference values</a></li>
	<li><a href="custom-en.html">Customization, custom presets and multiple charts and graphs types</a></li>
	<li><a href="piecustom-en.html">Customizing pie charts</a></li>
	<li><a href="testing-en.html">Specific test cases</a></li>
</ul>

<hr>

<span class="wb-prettify all-pre"></span>
<section>
	<h2>Default</h2>
	<p><code>&lt;table class=&quot;wb-charts table&quot;&gt;</code></p>

	<table class="wb-charts table">
		<caption>Number of pages by main purpose and audience</caption>
		<tr>
			<td></td>
			<th>Education</th>
			<th>Task</th>
			<th>Navigation</th>
			<th>Support</th>
			<th>Information</th>
			<th>Corporate</th>
		</tr>
		<tr>
			<th>General</th>
			<td>2</td>
			<td>0</td>
			<td>20</td>
			<td>4</td>
			<td>100</td>
			<td>50</td>
		</tr>
		<tr>
			<th>Students</th>
			<td>2</td>
			<td>2</td>
			<td>1</td>
			<td>5</td>
			<td>50</td>
			<td>0</td>
		</tr>
		<tr>
			<th>Business</th>
			<td>60</td>
			<td>10</td>
			<td>20</td>
			<td>90</td>
			<td>50</td>
			<td>8</td>
		</tr>
		<tr>
			<th>Professional</th>
			<td>46</td>
			<td>26</td>
			<td>5</td>
			<td>101</td>
			<td>200</td>
			<td>142</td>
		</tr>
		<tr>
			<th>Lawyer</th>
			<td>0</td>
			<td>2</td>
			<td>4</td>
			<td>0</td>
			<td>300</td>
			<td>300</td>
		</tr>
	</table>
</section>

<section>
	<h2>Area charts</h2>

	<p><code>&lt;table class=&quot;wb-charts wb-charts-area table&quot;&gt;</code></p>

	<table class="wb-charts wb-charts-area table">
		<caption>Number of pages by main purpose and audience</caption>
		<tr>
			<td></td>
			<th>Education</th>
			<th>Task</th>
			<th>Navigation</th>
			<th>Support</th>
			<th>Information</th>
			<th>Corporate</th>
		</tr>
		<tr>
			<th>General</th>
			<td>2</td>
			<td>0</td>
			<td>20</td>
			<td>4</td>
			<td>100</td>
			<td>50</td>
		</tr>
		<tr>
			<th>Students</th>
			<td>2</td>
			<td>2</td>
			<td>1</td>
			<td>5</td>
			<td>50</td>
			<td>0</td>
		</tr>
		<tr>
			<th>Business</th>
			<td>60</td>
			<td>10</td>
			<td>20</td>
			<td>90</td>
			<td>50</td>
			<td>8</td>
		</tr>
		<tr>
			<th>Professional</th>
			<td>46</td>
			<td>26</td>
			<td>5</td>
			<td>101</td>
			<td>200</td>
			<td>142</td>
		</tr>
		<tr>
			<th>Lawyer</th>
			<td>0</td>
			<td>2</td>
			<td>4</td>
			<td>0</td>
			<td>300</td>
			<td>300</td>
		</tr>
	</table>
</section>

<section>
	<h2>Bar charts</h2>

	<p><code>&lt;table class=&quot;wb-charts wb-charts-bar table&quot;&gt;</code></p>

	<table class="wb-charts wb-charts-bar table">
		<caption>Number of pages by main purpose and audience</caption>
		<tr>
			<td></td>
			<th>Education</th>
			<th>Task</th>
			<th>Navigation</th>
			<th>Support</th>
			<th>Information</th>
			<th>Corporate</th>
		</tr>
		<tr>
			<th>General</th>
			<td>2</td>
			<td>0</td>
			<td>20</td>
			<td>4</td>
			<td>100</td>
			<td>50</td>
		</tr>
		<tr>
			<th>Students</th>
			<td>2</td>
			<td>2</td>
			<td>1</td>
			<td>5</td>
			<td>50</td>
			<td>0</td>
		</tr>
		<tr>
			<th>Business</th>
			<td>60</td>
			<td>10</td>
			<td>20</td>
			<td>90</td>
			<td>50</td>
			<td>8</td>
		</tr>
		<tr>
			<th>Professional</th>
			<td>46</td>
			<td>26</td>
			<td>5</td>
			<td>101</td>
			<td>200</td>
			<td>142</td>
		</tr>
		<tr>
			<th>Lawyer</th>
			<td>0</td>
			<td>2</td>
			<td>4</td>
			<td>0</td>
			<td>300</td>
			<td>300</td>
		</tr>
	</table>
</section>

<section>
	<h2>Pie charts</h2>

	<p><code>&lt;table class=&quot;wb-charts wb-charts-pie table&quot;&gt;</code></p>

	<table class="wb-charts wb-charts-pie table">
		<caption>Number of pages by main purpose and audience</caption>
		<tr>
			<td></td>
			<th>Education</th>
			<th>Task</th>
			<th>Navigation</th>
			<th>Support</th>
			<th>Information</th>
			<th>Corporate</th>
		</tr>
		<tr>
			<th>General</th>
			<td>2</td>
			<td>0</td>
			<td>20</td>
			<td>4</td>
			<td>100</td>
			<td>50</td>
		</tr>
		<tr>
			<th>Students</th>
			<td>2</td>
			<td>2</td>
			<td>1</td>
			<td>5</td>
			<td>50</td>
			<td>0</td>
		</tr>
		<tr>
			<th>Business</th>
			<td>60</td>
			<td>10</td>
			<td>20</td>
			<td>90</td>
			<td>50</td>
			<td>8</td>
		</tr>
		<tr>
			<th>Professional</th>
			<td>46</td>
			<td>26</td>
			<td>5</td>
			<td>101</td>
			<td>200</td>
			<td>142</td>
		</tr>
		<tr>
			<th>Lawyer</th>
			<td>0</td>
			<td>2</td>
			<td>4</td>
			<td>0</td>
			<td>300</td>
			<td>300</td>
		</tr>
	</table>
</section>

<section>
	<h2>Pie chart with labels</h2>

	<p><code>&lt;table class=&quot;wb-charts wb-charts-pie table&quot;&gt;</code></p>
	<p>When using labels, some labels may overlap if there are too many slices or there are two or more small slices next to each other. In the case that your labels overlap, you should consider displaying your data in a different type of chart.</p>
	<p>Consult the documentation to see the configuration options for pie charts with labels.</p>

	<table class="wb-charts wb-charts-slicelegend table">
		<caption>Number of pages by main purpose and audience</caption>
		<tr>
			<td></td>
			<th>Education</th>
			<th>Task</th>
			<th>Navigation</th>
			<th>Support</th>
			<th>Information</th>
			<th>Corporate</th>
		</tr>
		<tr>
			<th>Business</th>
			<td>60</td>
			<td>10</td>
			<td>20</td>
			<td>90</td>
			<td>50</td>
			<td>8</td>
		</tr>

	</table>
</section>

<section>
	<h2>Data table used</h2>
	<table class="table">
		<caption>Number of pages by main purpose and audience</caption>
		<tr>
			<td></td>
			<th>Education</th>
			<th>Task</th>
			<th>Navigation</th>
			<th>Support</th>
			<th>Information</th>
			<th>Corporate</th>
		</tr>
		<tr>
			<th>Business</th>
			<td>60</td>
			<td>10</td>
			<td>20</td>
			<td>90</td>
			<td>50</td>
			<td>8</td>
		</tr>
	</table>

	<details>
		<summary>View code</summary>
		<pre><code>&lt;table class="table"&gt;
	&lt;caption&gt;Number of pages by main purpose and audience&lt;/caption&gt;
	&lt;tr&gt;
		&lt;td&gt;&lt;/td&gt;
		&lt;th&gt;Education&lt;/th&gt;
		&lt;th&gt;Task&lt;/th&gt;
		&lt;th&gt;Navigation&lt;/th&gt;
		&lt;th&gt;Support&lt;/th&gt;
		&lt;th&gt;Information&lt;/th&gt;
		&lt;th&gt;Corporate&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;General&lt;/th&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;0&lt;/td&gt;
		&lt;td&gt;20&lt;/td&gt;
		&lt;td&gt;4&lt;/td&gt;
		&lt;td&gt;100&lt;/td&gt;
		&lt;td&gt;50&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Students&lt;/th&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;1&lt;/td&gt;
		&lt;td&gt;5&lt;/td&gt;
		&lt;td&gt;50&lt;/td&gt;
		&lt;td&gt;0&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Business&lt;/th&gt;
		&lt;td&gt;60&lt;/td&gt;
		&lt;td&gt;10&lt;/td&gt;
		&lt;td&gt;20&lt;/td&gt;
		&lt;td&gt;90&lt;/td&gt;
		&lt;td&gt;50&lt;/td&gt;
		&lt;td&gt;8&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Professional&lt;/th&gt;
		&lt;td&gt;46&lt;/td&gt;
		&lt;td&gt;26&lt;/td&gt;
		&lt;td&gt;5&lt;/td&gt;
		&lt;td&gt;101&lt;/td&gt;
		&lt;td&gt;200&lt;/td&gt;
		&lt;td&gt;142&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Lawyer&lt;/th&gt;
		&lt;td&gt;0&lt;/td&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;4&lt;/td&gt;
		&lt;td&gt;0&lt;/td&gt;
		&lt;td&gt;300&lt;/td&gt;
		&lt;td&gt;300&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</code></pre>
	</details>
</section>
